<template>
    <div class="doctor-detail-page">
        <!-- 页面头部 -->
        <div class="page-header">
            <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
            <h1 class="page-title">医生详情</h1>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <el-skeleton :rows="10" animated />
        </div>

        <!-- 医生详情内容 -->
        <div v-else-if="doctor" class="doctor-content">
            <!-- 基本信息 -->
            <div class="info-section">
                <h2 class="section-title">基本信息</h2>
                <div class="basic-info">
                    <!-- 头像区域 -->
                    <div class="avatar-section">
                        <div class="avatar-container">
                            <img v-if="doctor.photo" :src="doctor.photo" :alt="doctor.name" class="doctor-avatar" />
                            <div v-else class="default-avatar">
                                <i class="el-icon-user"></i>
                            </div>
                        </div>
                        <div class="avatar-info">
                            <h3 class="doctor-name">{{ doctor.name }}</h3>
                            <p class="doctor-title">{{ doctor.title }}</p>
                            <p class="doctor-hospital">{{ doctor.hospital }}</p>
                        </div>
                    </div>

                    <!-- 详细信息表格 -->
                    <div class="info-table">
                        <div class="info-row">
                            <span class="info-label">ID：</span>
                            <span class="info-value">{{ doctor.id }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">姓名：</span>
                            <span class="info-value">{{ doctor.name }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">手机号：</span>
                            <span class="info-value">{{ maskPhone(doctor.phone) }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">平台科室：</span>
                            <span class="info-value">{{ doctor.department }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">性别：</span>
                            <span class="info-value">{{ doctor.gender }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">医院：</span>
                            <span class="info-value">{{ doctor.hospital }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">职称：</span>
                            <span class="info-value">{{ doctor.title }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">医院科室：</span>
                            <span class="info-value">{{ doctor.department }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">注册时间：</span>
                            <span class="info-value">{{ formatDateTime(doctor.registrationTime) }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">银行卡号：</span>
                            <span class="info-value">{{ maskBankCard(doctor.bankCardNumber) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 擅长 -->
            <div class="info-section" v-if="doctor.specialty">
                <h2 class="section-title">擅长</h2>
                <div class="specialty-content">
                    <p class="specialty-text">{{ doctor.specialty }}</p>
                </div>
            </div>

            <!-- 简介 -->
            <div class="info-section" v-if="doctor.introduction">
                <h2 class="section-title">简介</h2>
                <div class="introduction-content">
                    <div class="introduction-text" v-html="formatIntroduction(doctor.introduction)"></div>
                </div>
            </div>

            <!-- 证书 -->
            <div class="info-section" v-if="doctor.certificates">
                <h2 class="section-title">证书</h2>
                <div class="certificates-content">
                    <div class="certificates-grid">
                        <div class="certificate-item" v-for="(cert, index) in parseCertificates(doctor.certificates)"
                            :key="index">
                            <img :src="cert" :alt="`证书${index + 1}`" class="certificate-image" />
                            <p class="certificate-label">{{ getCertificateLabel(index) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            
            
        </div>

        <!-- 错误状态 -->
        <div v-else class="error-container">
            <el-empty description="医生信息不存在或加载失败">
                <el-button type="primary" @click="goBack">返回列表</el-button>
            </el-empty>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { apiClient } from '@/api/doctor'
import { idText } from 'typescript'

const route = useRoute()
const router = useRouter()

// 响应式数据
const doctor = ref<any>({})
const loading = ref(true)



// 获取医生详情
const fetchDoctorDetail = async () => {
    try {
        loading.value = true
        console.log(route.query.id);
        const id = Number(route.query.id)
        const result = await apiClient.get('/api/DoctorGetDoctorById', {
            params: {
                id: id
            }
        })
        console.log(result);

        if (result.data.code === 100) {
            doctor.value = result.data.data
            ElMessage.success('获取医生详情成功')
        } else {
            ElMessage.error(result.data.message || '获取医生详情失败')
        }
    } catch (error: any) {
        console.error('获取医生详情失败:', error)
        ElMessage.error(error.message || '网络错误，请稍后重试')
    } finally {
        loading.value = false
    }
}

// 格式化日期时间
const formatDateTime = (dateTimeStr: string) => {
    if (!dateTimeStr) return ''
    const date = new Date(dateTimeStr)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}

// 掩码手机号
const maskPhone = (phone?: string) => {
    if (!phone) return '暂无'
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 掩码银行卡号
const maskBankCard = (cardNumber?: string) => {
    if (!cardNumber) return '暂无'
    return cardNumber.replace(/(\d{4})\d{8}(\d{4})/, '$1 **** **** $2')
}

// 格式化简介
const formatIntroduction = (introduction: string) => {
    if (!introduction) return ''
    return introduction.replace(/\n/g, '<br>')
}

// 解析证书
const parseCertificates = (certificates?: string) => {
    if (!certificates) return []
    try {
        return JSON.parse(certificates)
    } catch {
        return [certificates]
    }
}

// 获取证书标签
const getCertificateLabel = (index: number) => {
    const labels = ['医生执业证书', '职称证书', '专业证书']
    return labels[index] || `证书${index + 1}`
}

// 审核通过
const handleAudit = async () => {
    try {
        await ElMessageBox.confirm(
            `确定要审核通过医生 ${doctor.value?.name} 吗？`,
            '审核确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )

        // 这里可以调用审核 API
        ElMessage.success('审核通过成功')
        await fetchDoctorDetail() // 重新加载数据
    } catch (error: any) {
        if (error !== 'cancel') {
            ElMessage.error('审核失败')
        }
    }
}

// 审核拒绝
const handleReject = async () => {
    try {
        await ElMessageBox.confirm(
            `确定要拒绝医生 ${doctor.value?.name} 吗？`,
            '拒绝确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )

        // 这里可以调用拒绝 API
        ElMessage.success('审核拒绝成功')
        await fetchDoctorDetail() // 重新加载数据
    } catch (error: any) {
        if (error !== 'cancel') {
            ElMessage.error('操作失败')
        }
    }
}

// 返回上一页
const goBack = () => {
    router.back()
}

// 组件挂载时获取数据
onMounted(() => {
    
        fetchDoctorDetail()
    
})
</script>

<style scoped>
.doctor-detail-page {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.page-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.loading-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doctor-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.info-section {
    padding: 30px;
    border-bottom: 1px solid #eee;
}

.info-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #409eff;
}

.basic-info {
    display: flex;
    gap: 30px;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-width: 200px;
}

.avatar-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}

.doctor-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.default-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #ccc;
}

.avatar-info {
    text-align: center;
}

.doctor-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

.doctor-title {
    font-size: 14px;
    color: #666;
    margin: 0 0 5px 0;
}

.doctor-hospital {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.info-table {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-row {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #fafafa;
    border-radius: 6px;
}

.info-label {
    font-weight: 500;
    color: #555;
    min-width: 100px;
}

.info-value {
    color: #333;
    flex: 1;
}

.specialty-content,
.introduction-content {
    background: #fafafa;
    padding: 20px;
    border-radius: 8px;
    line-height: 1.6;
}

.specialty-text {
    margin: 0;
    color: #333;
    font-size: 16px;
}

.introduction-text {
    color: #333;
    font-size: 14px;
    line-height: 1.8;
}

.certificates-content {
    padding: 20px;
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.certificate-item {
    text-align: center;
}

.certificate-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.certificate-label {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

.audit-status {
    display: flex;
    gap: 30px;
    align-items: center;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-label {
    font-weight: 500;
    color: #555;
}

.action-buttons {
    padding: 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
    border-top: 1px solid #eee;
}

.error-container {
    background: white;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .basic-info {
        flex-direction: column;
    }

    .info-table {
        grid-template-columns: 1fr;
    }

    .audit-status {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons {
        flex-direction: column;
    }
}
</style>